<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!-- <meta http-equiv="Cache-Control" content="public" /> -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>汽车在线</title>
    <link type="text/css" rel="stylesheet" href="css/global.css" />
    <style>
        .header .title .toolbox {
            background-image: url(images/icon_menu.png);
        }

        #map-container {
            width: 100%;
            height: 100%;
            margin-top: 3.5em;
        }

        .info-window-container {
            width: 18em;
            height: 12em;
            -webkit-background-color: rgba(0, 0, 0, .5);
            background-color: rgba(0, 0, 0, .5);
            -webkit-border-radius: 5px;
            border-radius: 5px;
            position: relative;
            color: #fff;
        }

        .info-window-container a,
        .info-window-container a:visited {
            color: #fff;
            text-decoration: underline;
        }

        .info-window-container .arrow {
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid rgba(0, 0, 0, .5);
            width: 0;
            height: 0;
            position: absolute;
            left: 50%;
            margin-left: -3px;
            bottom: -7px;
        }

        .tool-wrapper {
            position: absolute;
            width: 100%;
            z-index: 999;
        }

        .player {
            width: 100%;
            -webkit-background-color: rgba(0, 0, 0, .5);
            background-color: rgba(0, 0, 0, .5);
            height: 40px;
            z-index: 9;
            /* position: absolute;
            top: 25px; */
            position: fixed;
            bottom: 0;
        }

        #real-time {
            float: right;
            width: 40px;
            height: 20px;
            margin: 10px 0;
            color: #fff;
        }

        #progress-bar {
            margin: 0 50px 0 60px;
            position: relative;
            cursor: pointer;
            top: 18px;
        }

        #progress-bar .line {
            height: 5px;
            background-color: rgba(255, 255, 255, .8);
            border-radius: 3px;
        }

        #progress-bar .pass-line {
            height: 5px;
            background-color: rgba(66, 97, 180, .8);
            border-radius: 3px;
            margin-top: -5px;
            width: 0;
        }

        #progress-bar .block {
            height: 16px;
            width: 16px;
            border-radius: 16px;
            position: absolute;
            z-index: 9;
            background-color: rgba(255, 255, 255, .8);
            top: -5px;
            margin-left: -8px;
            cursor: pointer;
        }

        #play-btn {
            width: 30px;
            height: 30px;
            float: left;
            background-image: url(images/icon_play.png);
            -webkit-background-size: contain;
            background-size: contain;
            margin: 5px 10px;
            cursor: pointer;
        }

        #play-btn.pause {
            background-image: url(images/icon_pause.png);
        }

        #time-selector {
            position: absolute;
            right: 0;
            top: 50px;
            -webkit-transition: all .5s;
            transition: all .5s;
            border-radius: 5px;
            background-color: #fff;
            width: 8em;
            height: 8.4em;
            z-index: 999;
            padding: 10px 0;
            display: none;
        }

        #time-selector ul li {
            border-bottom: 1px solid #eee;
            padding: 3px 10px;
            cursor: pointer;
        }

        #time-selector .arrow {
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 7px solid #fff;
            width: 0;
            height: 0;
            position: absolute;
            right: 23px;
            margin-left: -3px;
            top: -7px;
        }

        #custom-time-mask {
            background-color: rgba(0, 0, 0, .3);
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 999;
            top: 0;
            left: 0;
            display: none;
        }

        #custom-time-mask ul {
            width: 80%;
            margin: -75px auto;
            position: relative;
            top: 50%;
            background-color: #fff;
            border: 1px solid #ccc;
            padding-bottom: 10px;
        }

        #custom-time-mask ul li {
            padding: 10px;
        }

        #custom-time-mask ul li input[type="text"] {
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        @font-face {
            font-family: "iconfont";
            src: url('iconfont.eot%EF%B9%96t=1537163869719.html');
            /* IE9*/
            src: url('iconfont.eot%EF%B9%96t=1537163869719.html#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAR0AAsAAAAABsQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8ykfyY21hcAAAAYAAAABKAAABcOcotapnbHlmAAABzAAAAMIAAADQU5BnoGhlYWQAAAKQAAAALwAAADYSqgoPaGhlYQAAAsAAAAAcAAAAJAfeA4NobXR4AAAC3AAAAAgAAAAICAAAAGxvY2EAAALkAAAABgAAAAYAaAAAbWF4cAAAAuwAAAAgAAAAIAEQAEluYW1lAAADDAAAAUUAAAJtPlT+fXBvc3QAAARUAAAAHQAAAC5qf2d1eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMTxjYG7438AQw9zAcAUozAiSAwDgGQw3eJztkLENgDAQA8/KQ4EYgSo1s1Cxf8kaycfAFrF0lnz66oEFKMmZBOhGjFxpZV/Y7IPqmxj+obW/c4cbrczs7uNb/tUL6ijqCWkAAHicY2BhYPivw8LArMPAzSDOoMxgw8DAyMbALsYgbsZgrsbArMeobsdoLscozsfIDGSYqCnzMYqKiAkrqdkzmqkpK7Gxi9sx8TOyiQEl1fkYmRhu/bvPysqoeOsWoyIr67/7tza+ZmF5vRFMTlfRY5RX0NRUkGRjZtPm5ZKUL7MTEDUQ4VYTkDDNtRGW0GLWAWlBMuJPKkwzkGRyZdRVkFRmNJSWVfhXJyS2TM/MwliGT4RJdZ6jHqOxtZSwMADSKC/JAAB4nGNgZGBgAOLi6SJM8fw2Xxm4WRhA4PrR5FgE/V+HhYFZB8jlYGACiQIAAO8I8QB4nGNgZGBgbvjfwBDDwgACQJKRARUwAQBHCAJrBAAAAAQAAAAAAAAAAGgAAAABAAAAAgA9AAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAiZGJkZmBJTMvLZ+BAQAJ+AHGAAAA') format('woff'),
                url('iconfont.ttf%EF%B9%96t=1537163869719.html') format('truetype'),
                /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
                url('iconfont.svg%EF%B9%96t=1537163869719.html#iconfont') format('svg');
            /* iOS 4.1- */
        }

        .iconfont {
            margin-left: 2px;
            font-family: "iconfont" !important;
            font-size: 14px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <script src="js/lang_cn.js"></script>
    <script src="js/brand/zepto.min.js"></script>
    <script src="js/global.js"></script>
</head>

<body>
    <div class="container">
        <div class="header">
            <h3 class="title">
                <a class="back" href="javascript:history.back();"></a>
                <a class="toolbox" href="javascript:;" id="time-selector-btn"></a>历史回放
            </h3>
            <div class="tool-wrapper">
                <div class="info-bar">
                    <span class="right">航向: </span>
                    <span class="left"></span>
                    <span class="middle">0 km/h</span>
                </div>
                <div class="player">
                    <div id="play-btn"></div>
                    <div id="real-time">00:00</div>
                    <div id="progress-bar">
                        <div class="line"></div>
                        <div class="pass-line"></div>
                        <div class="block"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="time-selector">
            <ul>
                <li data-type="1"><input data-type="1" type="radio" name="time-selector-radio" value="1"
                        autocomplete="off" />&nbsp;今天</li>
                <li data-type="2"><input data-type="2" type="radio" name="time-selector-radio" value="2"
                        autocomplete="off" />&nbsp;昨天</li>
                <li data-type="3"><input data-type="3" type="radio" name="time-selector-radio" value="3"
                        autocomplete="off" />&nbsp;前天</li>
                <li data-type="4"><input data-type="4" type="radio" name="time-selector-radio" value="4"
                        autocomplete="off" />&nbsp;前一小时</li>
                <li data-type="5"><input data-type="5" type="radio" name="time-selector-radio" value="5"
                        autocomplete="off" />&nbsp;自定义</li>
            </ul>
            <div class="arrow"></div>
        </div>
        <div id="map-container">
            <div class="loading">Loading...</div>
        </div>
        <div id="custom-time-mask">
            <ul>
                <li><input type="text" data-role="datebox" id="begin-time" value="" placeholder="开始时间"
                        autocomplete="off"></li>
                <li><input type="text" data-role="datebox" id="end-time" value="" placeholder="结束时间" autocomplete="off">
                </li>
                <li><input type="button" data-action="confirm" class="normal-btn normal-btn-xs" value="确定"><input
                        type="button" class="normal-btn normal-btn-xs pull-right" data-action="cancel" value="取消"></li>
            </ul>
        </div>
    </div>
    <script src="js/mobiscroll/mobiscroll.min.js"></script>
    <link href="css/mobiscroll/mobiscroll.widget.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
    <script>
        var utils = goome.wx.utils;
        console.log(utils)
        if (utils.defaultParams().map_type == 'GOOGLE') {
            utils.writeScripts(['http://ditu.google.cn/maps/api/js?sensor=false', 'js/overlay-google.js', 'js/playback-google.js']);
        } else {
            utils.writeScripts(['http://api.map.baidu.com/api?v=2.0&ak=BCa2d508d2c567acd009eb09765f5797', 'js/playback.js']);
        }
    </script>
    <script type="text/javascript">
        playbackPage.init();
        utils.mapTypeOptions('playback');
    </script>
</body>

</html>